<template>
  <div>
    <validator name="signupForm">
      <form role="form" name="Form" class="col-md-4 col-md-offset-4 col-sm-12" autocomplete="off" novalidate>
          <div class="form-group">
            <input type="text" class="form-control" v-model="account.username" initial="off" detect-change="off"  placeholder="请输入手机号" v-validate:username="['required', 'mobile']">
            <div>
              <error-template v-show="$signupForm.username.required">{{$signupForm.username.required}}</error-template>
              <error-template v-show="$signupForm.username.mobile&&!$signupForm.username.required">{{$signupForm.username.mobile}}</error-template>
            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" v-model="account.imgCode" initial="off" detect-change="off"  placeholder="请输入验证码" v-validate:imgcode="['required']">
              <span class="input-group-btn">
                <img-check-code></img-check-code>
              </span>
            </div>
            <div>
              <error-template v-show="$signupForm.imgcode.required">{{$signupForm.imgcode.required}}</error-template>
            </div>
          </div>
          <div class="form-group">
              <button type="button" v-on:click.prevent="validUserName" class="form-control btn btn-success">立即注册</button>
          </div>
      </form>
    </validator>
    <div class="clearfix"></div>
  </div>
</template>
<script>
import ImgCheckCode from '../ImgCheckCode.vue'
import * as checkSerice from 'src/api/check'
export default {
  props: {
    account: {
      type: Object,
      required: true
    },
    state: {
      type: Object,
      required: true
    }
  },
  methods: {
    validUserName () {
      var self = this
      this.$validate(() => {
        if (self.$signupForm.invalid) {
          return
        }
        var account = self.account
        checkSerice.checkImgCode(account.imgCode)
        .then(() => {
          return checkSerice.checkUser(account.username)
        }).then(() => {
          self.$dispatch('sendSms')
          self.state.step++
        }).catch((data) => {
          self.$notify({
            type: 'error',
            message: data
          })
        })
      })
    }
  },
  components: {
    ImgCheckCode
  }
}
</script>